<template>
  <div>
    <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
      <Draggable
        @start="start"
        @end="end"
        class="draggable-ul"
        animation="300"
        :list="demandList"
        group="people"
        itemKey="name"
      >
        <template #item="{ element }">
          <div class="cursor-move draggable-li flex">
            <span class="mr-10">1</span>
            <span class="ml-2">{{ element.name }}</span>
          </div>
        </template>
      </Draggable>
    </NCard>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import Draggable from 'vuedraggable';

  const demandList = reactive([
    { name: '日期', id: 1 },
    { name: '地区', id: 2 },
    { name: '昵称', id: 3 },
    { name: 'ID', id: 4 },
    { name: '标签', id: 5 },
  ]);

  const start = (e) => {
    console.log(e);
  };
  const end = (e) => {
    console.log(e);
  };
</script>

<style lang="less" scoped>
  .draggable-ul {
    width: 100%;
    overflow: hidden;
    margin-top: -16px;

    .draggable-li {
      width: 100%;
      padding: 16px 10px;
      color: #333;
      border-bottom: 1px solid #efeff5;
    }
  }
</style>
